/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   PAGE
   ========================================================= */

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: hidden;
}

html::-webkit-scrollbar {
    display: none;
}


body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans Georgian",
        "DejaVu Sans",
        sans-serif;

    min-height: 100vh;

    background-color: #15062c;

    position: relative;

    overflow-x: hidden;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    gap: 1rem 2rem;

    padding: 16px 5%;
}


.logo-area {
    display: flex;

    align-items: center;

    gap: 1rem;

    min-width: 0;
}


.logo-area img {
    width: clamp(70px, 10vw, 150px);

    filter:
        drop-shadow(
            0 0 2px rgb(239, 118, 255)
        );
}


.logo-area h1 {
    font-size:
        clamp(1.3rem, 3vw, 2.7rem);

    font-weight: 600;
    font-family: "AcadNucx", sans-serif;

    color: #e8ddff;

    letter-spacing: 0.1rem;
}


.logo-area p {
    font-size:
        clamp(0.72rem, 1.15vw, 1.15rem);
    margin:
        0.35rem 0 0 0.85rem;
    color: #8a8a8a;
    font-weight: 300;
    letter-spacing: 0.08em;
    line-height: 1.35;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

nav {
    display: flex;

    align-items: center;
}


nav ul {
    display: flex;

    align-items: center;

    gap: 1rem;

    list-style: none;
}


nav a {
    position: relative;

    color: rgb(251, 238, 255);

    text-decoration: none;

    letter-spacing: 0.08rem;

    font-size:
        clamp(0.9rem, 1.6vw, 1.5rem);

    font-weight: bold;

    padding: 8px 16px;

    transition:
        color 0.3s ease,
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.4s ease,
        background 0.3s ease;

    border: 1px solid rgba(170, 80, 255, 0.4);

    border-radius: 20px;

    background: rgba(20, 10, 40, 0.6);

    box-shadow:
        0 0 12px rgba(150, 90, 255, 0.35);

    white-space: nowrap;

    overflow: hidden;
}


nav a::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(170, 80, 255, 0.18),
            rgba(255, 255, 255, 0.12),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    pointer-events: none;
}


nav a::after {
    content: "";

    position: absolute;

    left: 15%;
    bottom: 3px;

    width: 70%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #aa50ff,
            transparent
        );

    transform: scaleX(0);

    transform-origin: center;

    opacity: 0;

    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.25s ease;

    box-shadow:
        0 0 8px #aa50ff;
}


nav a:hover {
    color: #ffffff;

    transform: translateY(-4px);

    border-color:
        rgba(170, 80, 255, 0.8);

    background:
        rgba(35, 15, 65, 0.75);

    box-shadow:
        0 0 18px rgba(170, 80, 255, 0.35),
        0 0 35px rgba(170, 80, 255, 0.2);
}


nav a:hover::before {
    left: 140%;
}


nav a:hover::after {
    transform: scaleX(1);

    opacity: 1;
}


/* =========================================================
   SERVICES
   ========================================================= */

.services {
    text-align: center;

    padding:
        clamp(30px, 5vw, 60px)
        5%
        60px;

    color: #e8ddff;
}


.services h2 {
    font-size:
        clamp(1.8rem, 5vw, 48px);

    margin-bottom: 15px;
}


.intro {
    width: 90%;

    max-width: 600px;

    margin: auto;

    line-height: 1.8;

    color: #aaa;
}


/* =========================================================
   SERVICE CARDS
   ========================================================= */

.service-container {
    margin-top:
        clamp(24px, 4vw, 48px);

    display: flex;

    justify-content: center;

    gap: 25px;

    flex-wrap: wrap;
}


.card {
    flex: 1 1 320px;

    max-width: 420px;

    min-height: 260px;

    border:
        1px solid rgba(170, 80, 255, 0.4);

    border-radius: 20px;

    padding:
        clamp(24px, 4vw, 40px);

    background:
        rgba(255, 255, 255, 0.02);

    transition: 0.3s;
}


.card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 0 30px rgba(170, 80, 255, 0.4);
}


.card h3 {
    font-size: 24px;

    margin-bottom: 15px;

    line-height: 1.35;
}


.card p {
    color: #e8ddff;

    line-height: 1.8;
}


/* =========================================================
   PAGE FADE
   ========================================================= */

body {
    opacity: 0;

    animation:
        pageFadeIn 0.8s ease forwards;
}


@keyframes pageFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


body.fade-out {

    animation:
        pageFadeOut 0.5s ease forwards;

}


@keyframes pageFadeOut {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}


/* =========================================================
   MOVING GRID
   ========================================================= */

body::before {

    content: "";

    position: fixed;

    top: 0;
    left: 0;

    width: 200%;
    height: 200%;

    background-image:

        linear-gradient(
            rgba(0, 170, 255, 0.08)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 170, 255, 0.08)
            1px,
            transparent 1px
        );

    background-size: 50px 50px;

    animation:
        moveGrid 10s linear infinite;

    pointer-events: none;

    z-index: -1;
}


@keyframes moveGrid {

    from {
        transform: translate(0, 0);
    }

    to {
        transform:
            translate(-50px, -50px);
    }

}


/* =========================================================
   SERVICE ICON
   ========================================================= */

.service-icon {

    height: 160px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 20px;
}


/* =========================================================
   CODE EDITOR
   ========================================================= */

.mini-editor {

    width:
        min(230px, 100%);

    height: 150px;

    background: #0b1120;

    border:
        1px solid rgba(90, 130, 255, .4);

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 0 25px rgba(66, 133, 255, .25),
        inset 0 0 15px rgba(66, 133, 255, .08);

    transition: .35s;
}


.service-card:hover .mini-editor {

    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 0 40px rgba(255, 141, 12, .35),
        0 0 20px rgba(66, 133, 255, .4);
}


.editor-top {

    height: 30px;

    background: #141d32;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0 12px;

    border-bottom:
        1px solid rgba(255, 255, 255, .08);
}


.dot {

    width: 10px;
    height: 10px;

    border-radius: 50%;
}


.red {
    background: #ff605c;
}


.yellow {
    background: #ffbd44;
}


.green {
    background: #00ca4e;
}


.filename {

    margin-left: 12px;

    color: #8fa8ff;

    font-size: 12px;

    font-family: Arial, sans-serif;
}


/* =========================================================
   CODE
   ========================================================= */

.editor-body {

    padding: 14px;

    font-family: Consolas, monospace;

    font-size: 13px;

    line-height: 1.8;
}


.cursor {

    display: inline-block;

    width: 2px;
    height: 15px;

    background: white;

    vertical-align: middle;

    margin-left: 3px;

    animation:
        blink .8s infinite;
}


@keyframes blink {

    50% {
        opacity: 0;
    }

}


.keyword {
    color: #c586ff;
}


.function {
    color: #61dafb;
}


.variable {
    color: #9cdcfe;
}


.string {
    color: #ce9178;
}


.success {
    color: #4ec9b0;
}


#typing-code {
    white-space: pre-wrap;
}


.code-editor pre {

    text-align: left;

    padding-left: 25px;
}


/* =========================================================
   HARD DRIVE
   ========================================================= */

.hdd-icon {

    width:
        min(230px, 100%);

    height: 150px;

    overflow: hidden;

    filter:
        drop-shadow(
            0 0 12px rgba(66, 133, 255, .2)
        );

    transition: .35s;
}


.service-card:hover .hdd-icon {

    transform:
        translateY(-4px)
        scale(1.03);

    filter:
        drop-shadow(
            0 0 20px rgba(255, 141, 12, .35)
        )
        drop-shadow(
            0 0 12px rgba(66, 133, 255, .4)
        );
}


.hdd-svg {

    width: 100%;
    height: 100%;

    overflow: visible;
}


.hdd-screw {

    fill: #1a2540;

    stroke:
        rgba(255, 255, 255, .15);

    stroke-width: .75;
}


.hdd-platter-group {

    transform-origin:
        90px 75px;

    animation:
        hddSpin 2.2s linear infinite;
}


@keyframes hddSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.hdd-sectors {

    animation:
        sectorShimmer 2.2s linear infinite;
}


@keyframes sectorShimmer {

    0%,
    100% {
        opacity: .6;
    }

    50% {
        opacity: 1;
    }

}


.hdd-hub-glow {

    animation:
        hubPulse 2s ease-in-out infinite;
}


@keyframes hubPulse {

    0%,
    100% {
        filter:
            drop-shadow(
                0 0 2px #57b8ff
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 8px #57b8ff
            );
    }

}


.hdd-arm-group {

    transform-origin:
        145px 35px;

    animation:
        armSeek 1.6s ease-in-out infinite;
}


@keyframes armSeek {

    0%,
    100% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-4deg);
    }

    80% {
        transform: rotate(6deg);
    }

}


.hdd-arm-glow {

    filter:
        drop-shadow(
            0 0 4px rgba(255, 141, 12, .8)
        );
}


.hdd-led {

    fill: #00ff88;

    animation:
        pulse 2s infinite;
}


.hdd-label {

    fill: #cfd8ff;

    font-size: 9px;

    font-family: Consolas, monospace;
}


.hdd-capacity {

    fill: #57b8ff;

    font-size: 9px;

    font-family: Consolas, monospace;
}


.hdd-pins rect {

    animation:
        pinFlicker 1.4s ease-in-out infinite;
}


.hdd-pins rect:nth-child(2n) {

    animation-delay: .3s;
}


.hdd-pins rect:nth-child(3n) {

    animation-delay: .6s;
}


@keyframes pinFlicker {

    0%,
    100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

}


@keyframes pulse {

    0%,
    100% {
        opacity: .4;

        box-shadow:
            0 0 4px currentColor;
    }

    50% {
        opacity: 1;

        box-shadow:
            0 0 10px currentColor;
    }

}


/* =========================================================
   CONSULTING DASHBOARD
   ========================================================= */

.consulting-animation {

    height: 180px;

    display: flex;

    justify-content: center;

    align-items: center;
}


.holo-dashboard {

    position: relative;

    width:
        min(230px, 100%);

    height: 150px;

    padding: 15px;

    border:
        1px solid rgba(90, 130, 255, .4);

    border-radius: 12px;

    background: #0b1120;

    color: #d6e6ff;

    font-family: monospace;

    box-shadow:
        0 0 25px rgba(66, 133, 255, .25),
        inset 0 0 15px rgba(66, 133, 255, .08);

    overflow: hidden;
}


.scan-line {

    position: absolute;

    left: 0;

    width: 100%;

    height: 2px;

    background: #8eeaff;

    top: 0;

    box-shadow:
        0 0 5px #00aaff,
        0 0 15px #00aaff,
        0 0 30px #00aaff;

    animation:
        scan 3s infinite linear;
}


@keyframes scan {

    from {
        top: 0;
    }

    to {
        top: 90%;
    }

}


.stats p {

    display: flex;

    justify-content: space-between;

    margin: 8px 0;
}


.stats span {

    color: #00aaff;
}


.chart {

    display: flex;

    align-items: end;

    gap: 5px;

    height: 35px;
}


.chart div {

    width: 12px;

    background: #00aaff;

    animation:
        grow 1.5s infinite alternate;
}


.chart div:nth-child(1) {
    height: 15px;
}


.chart div:nth-child(2) {
    height: 30px;
}


.chart div:nth-child(3) {
    height: 22px;
}


.chart div:nth-child(4) {
    height: 40px;
}


@keyframes grow {

    from {
        transform: scaleY(.6);
    }

    to {
        transform: scaleY(1);
    }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .card {

        flex-basis: 100%;

        min-width: 0;
    }

}


@media (max-width: 640px) {

    nav {

        width: 100%;

        justify-content: center;
    }

}